<template>
    <div>
        <slot name="left"></slot>
        <span :id="eleId" :class="occupied"></span>
        <slot name="right"></slot>
    </div>
</template>

<script>
import Countup from 'countup';
export default {
    data() {
        return {
        };
    },
     props: {
        /**
         * @description 起始值
         */
        startVal:{
            type:Number,
            default:0
        },
        /**
         * @description 最终值
         */
        endVal:{
            type:Number,
            required:true
        },
        /**
         * @description 小数点后保留几位小数
         */
        decimals:{
            type:Number,
            default:0
        },
        /**
         * @description 动画持续多长时间
         */
        duration:{
            type:Number,
            default:1
        },
        /**
         * @description 延迟多长时间后执行
         */
        delay:{
            type:Number,
            default:0
        },
        /**
         * @description 是否开启渐慢执行
         */
        useEasing:{
            type:Boolean,
            default:false
        },
        /**
         * @description 是否分组
         */
        useGrouping:{
            type:Boolean,
            default:true
        },
        /**
         * @description 分组符号
         */
        separator:{
            type:String,
            default:','
        },
        /**
         * @description 整数跟小数的分隔符
         */
        decimal:{
            type:String,
            default:'.'
        },
        /**
         * @description 类名
         */
        className:{
            type:String,
            default:' '
        }
    },
    watch: {
        /**
         * @description 监听endVal的变化
         */
        endVal(newValue, oldValue) {
            this.counter.update(newValue)
        },
    },
    mounted() {
        this.$nextTick( () =>{
            this.counter = new Countup(this.eleId,this.startVal,this.endVal,this.decimals,this.duration,{
                useEasing:this.useEasing,
                useGrouping:this.useGrouping,
                separator:this.separator,
                decimals:this.decimals
            })
            //动画延迟
            setTimeout(()=>{
                this.counter.start()
            },this.delay)
        });
    },
    computed: {
        eleId() {
            //每个组件的唯一id值
            return `count_up_${this._uid}`;
        },
        occupied(){
            return [
                'count-to-number',
                this.className
            ]
        }
    },
    methods: {
        
    },
};
</script>

<style lang="less" scoped>

</style>